//点击显示商品详情

$('#productList').on('click','.cell-item',function (){
    var product_info=$('.cell-item').val();
    var tableHTML = '';
    $('#floatingWindow').html(tableHTML);
    console.log(product_info);
    tableHTML += '<form >'
    tableHTML += '<table class="product-table-info">\n' +
        '            <tr>\n' +
        '                <th class="cell-img">&nbsp;</th>\n' +
        '                <th class="cell-item">Product ID</th>\n' +
        '                <th class="cell-product">Product Name</th>\n' +
        '                <th class="cell-price">List Price</th>\n' +
        '                <th class="cell-img">&nbsp;</th>\n' +
        '            </tr>';
    tableHTML += '<tr >\n' +
        '                <td class="cell-img">\n' +
        '                    <a href="#">';
    tableHTML += '<img src="'+product_info.image+'" class="product-img" name="image" id="product-image" value="'+product_info.image+'">';
    tableHTML += '</a>\n' +
        '                </td>\n' +
        '                <td class="cell-item" id="productId" value="'+product_info.productId+'">';
    tableHTML += product_info.productId;
    tableHTML += '</td>\n' +
        '                <td class="cell-product">';
    tableHTML += '<input type="text" name="productName" id="product-name" value="'+product_info.name+'">';
    tableHTML += '</td>\n' +
        '                <td class="cell-price">';
    tableHTML += '<input type="text" name="productPrice" id="product-price" value="$'+product_info.price+'">'+'</td>\n'+'<td>\n';

    tableHTML += '<button type="submit" class="ProductSave">保存</button>'
    tableHTML +=
        '               </td>\n' +
        '            </tr>\n' +
        '        </table>';

    tableHTML += '</form>'
    $('#floatingWindow').html(tableHTML);
    $('#whole').show();
    $('#floatingWindow').show();
});
function check(product){
    console.log(product);
    var tableHTML = '';
    $('#floatingWindow').html(tableHTML);
    tableHTML += '<form >'
    tableHTML += '<table class="product-table-info">\n' +
        '            <tr>\n' +
        '                <th class="cell-img">&nbsp;</th>\n' +
        '                <th class="cell-item">Product ID</th>\n' +
        '                <th class="cell-product">Product Name</th>\n' +
        '                <th class="cell-price">List Price</th>\n' +
        '                <th class="cell-img">&nbsp;</th>\n' +
        '            </tr>';
    tableHTML += '<tr >\n' +
        '                <td class="cell-img">\n' +
        '                    <a href="#">';
    tableHTML += '<img src="'+product.image+'" class="product-img" name="image" id="product-image" value="'+product.image+'">';
    tableHTML += '</a>\n' +
        '                </td>\n' +
        '                <td class="cell-item" id="productId" value="'+product.productId+'">';
    tableHTML += product.productId;
    tableHTML += '</td>\n' +
        '                <td class="cell-product">';
    tableHTML += '<input type="text" name="productName" id="product-name" value="'+product.name+'">';
    tableHTML += '</td>\n' +
        '                <td class="cell-price">';
    tableHTML += '<input type="text" name="productPrice" id="product-price" value="$'+product.price+'">'+'</td>\n'+'<td>\n';

    tableHTML += '<button type="submit" class="ProductSave">保存</button>'
    tableHTML +=
        '               </td>\n' +
        '            </tr>\n' +
        '        </table>';

    tableHTML += '</form>'
    $('#floatingWindow').html(tableHTML);
    $('#whole').show();
    $('#floatingWindow').show();
}

//搜索框
$('#keyword').on('keyup',function (){
    var keyword=$(this).val();
    //中文模式输入字符会有两次成功输出，待解决
    //var userid=$('#userid').val();
    var userid="ACID"
    console.log(userid);
    console.log(keyword);
    if(keyword !== ''&&keyword !== null)
    {
        $.ajax({
            type   :'GET',
            url    :'/ProductPage/search?keyword='+keyword+'&userid='+userid,
            success :function(data){
                console.log(data);
                var productListHTML = '';
                for(var i = 0;i < data.length;i++){
                    productListHTML += '<li class="productAutoItem" data-product="';
                    productListHTML += data[i];
                    productListHTML += '"> '
                    productListHTML += data[i].categoryId;
                    productListHTML += ': '
                    productListHTML += data[i].name;
                    productListHTML += '</li>';
                }
                $('#productAutoList').html(productListHTML);
                $('#productAutoComplete').show();
            },
            error  :function (errorMsg){
                console.log(errorMsg);
            }
        })
    }else{
        $('#productAutoComplete').hide();
    }
})

// $('.productAutoItem').on('click',function (){
//
// })


//点击搜索框中内容，显示商品详情
$('#productAutoComplete').on('click','.productAutoItem',function(){
    var product = $(this).data('product');
    $('#productAutoComplete').hide();
    $('#keyword').val('');
    check(product);
});

//移出某个范围，清空搜索框
$('.nav_search').on('mouseleave',function(){
    $('#productAutoComplete').hide();
    //要不要把搜索框清空？
});


//修改保存商品信息
$('#floatingWindow').on('click','.ProductSave',function (){
    var userid='ACID';
    var image=$('#product-image').val();
    var name=$('#product-name').val();
    var price=$('#product-price').val();
    var productId=$('#productId').text();
    console.log(productId);
    $.ajax({type   :'POST',
        url    :'/ProductPage/check?userId='+userid+'&image='+image+'&name='+name+'&price='+price+'&productId='+productId,
        success :function(data){

            //在主页面更改商品信息--------------待完成
            $('#whole').hide();
            $('#floatingWindow').hide();
            console.log("success save");
        },
        error  :function (errorMsg){
            console.log(errorMsg);
        }})
});

function deleteProduct(product){
    $.ajax({type   :'GET',
        url    :'/ProductPage/delete?userid='+product.userid+'&productId='+product.productId,
        success :function(data){

            //在主页面更改商品信息--------------待完成
            console.log("success delete");
        },
        error  :function (errorMsg){
            console.log(errorMsg);
        }})
}

//新增界面
function add(product){
    console.log(product);
    var tableHTML = '';
    $('#floatingWindow').html(tableHTML);
    tableHTML += '<form>'
    tableHTML += '<table class="product-table-info">\n' +
        '            <tr>\n' +
        '                <th class="cell-img">&nbsp;</th>\n' +
        '                <th class="cell-item">Product ID</th>\n' +
        '                <th class="cell-product">Product Name</th>\n' +
        '                <th class="cell-price">List Price</th>\n' +
        '                <th class="cell-img">&nbsp;</th>\n' +
        '            </tr>';
    tableHTML += '<tr id="product-user" value="'+product.userid+'">\n' +
        '                <td class="cell-img">\n' +
        '                    <a href="#">';
    tableHTML += '<img src="'+product.image+'" class="product-img" name="image" id="product-image" value="'+product.image+'">';
    tableHTML += '</a>\n' +
        '                </td>\n' +
        '                <td class="cell-item" id="productId" value="'+product.productId+'">';
    tableHTML += product.productId;
    tableHTML += '</td>\n' +
        '                <td class="cell-product">';
    tableHTML += '<input type="text" name="productName" id="product-name" value="'+product.name+'">';
    tableHTML += '</td>\n' +
        '                <td class="cell-price">';
    tableHTML += '<input type="text" name="productPrice" id="product-price" value="$'+product.price+'">'+'</td>\n'+'<td>\n';

    tableHTML += '<button type="submit" class="ProductAdd">增加</button>'
    tableHTML +=
        '               </td>\n' +
        '            </tr>\n' +
        '        </table>';

    tableHTML += '</form>'
    $('#floatingWindow').html(tableHTML);
    $('#whole').show();
    $('#floatingWindow').show();
}

$('#product-add').on('click',function (){
    var product={
        name:"",
        productId:"CXT",
        userid:"LQS",
        price:"",
        image:""
    };
    add(product);
});

$('#floatingWindow').on('click','.ProductAdd',function (){
    var userid=$('#product-user').val()
    var image=$('#product-image').val();
    var name=$('#product-name').val();
    var price=$('#product-price').val();
    var productId=$('#productId').text();

    console.log(productId);
    $.ajax({type   :'POST',
        url    :'/ProductPage/addProduct?userId='+userid+'&image='+image+'&name='+name+'&price='+price+'&productId='+productId,
        success :function(data){

            //在主页面更改商品信息--------------待完成
            $('#whole').hide();
            $('#floatingWindow').hide();
            console.log("success add");
        },
        error  :function (errorMsg){
            console.log(errorMsg);
        }})
})


